import { observable } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { IconHeight, IconWidth } from "./Config";
import { IconData } from "./IconData";
import { deskStore, icons } from "./Store";

//左上小选择
function IconSelect()
{
    return <></>;
}

//右上角菜单
function IconMenu()
{
    return <></>;
}

function IconImg({ img }: { img: string; })
{
    return (
        <div
            style={{
                width: 85,
                height: IconHeight - 40,
                marginTop: 5,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                pointerEvents: "none",//避免拽拖进入时影响光标
            }}
        >
            {/* draggable=false 避免影响整个图标的拖动 */}
            <img draggable="false" src={img} style={{ maxWidth: "100%", maxHeight: "98%" }} />
        </div>
    );
}

function IconTitle({ title }: { title: string; })
{
    return (
        <div
            style={{
                width: 86,
                height: 40,
                textAlign: "center",
                color: "#fff",
                wordBreak: "break-all",
                fontSize: "12px",
                fontFamily: `"Helvetica Neue", Helvetica, "Microsoft Yahei", 微软雅黑, "Lantinghei SC", STXihei, "WenQuanYi Micro Hei", Arial, sans-serif !important;`,
                padding: "6px 2px 6px 2px",
                pointerEvents: "none",//避免拽拖进入时影响光标
            }}
        >
            <span
                style={{
                    display: "-webkit-box",
                    WebkitBoxOrient: "vertical",
                    WebkitLineClamp: 2,
                    overflow: "hidden",
                }}
            >{title}</span>
        </div>
    );
}

interface DesktopIconProps
{
    icon: IconData;
    index: number;
    OnPick?: (index: number) => void;
}

@observer
export class DesktopIcon extends React.Component<DesktopIconProps, {}>{

    x: number;
    y: number;

    @observable onDragOver = false;

    OnPick = () =>
    {
        if (this.props.OnPick)
            this.props.OnPick(this.props.index);
        else
            for (let i = 0; i < icons.length; i++)
                icons[i].selected = i === this.props.index;
    };

    render()
    {
        return (
            <div
                style={{
                    width: IconWidth,
                    height: IconHeight,

                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    overflow: "hidden",

                    position: "absolute",
                    left: this.props.icon.x,
                    top: this.props.icon.y,

                    transition: !(deskStore.dragIng && this.props.icon.selected) ? "all 0.1s" : "",

                    backgroundColor: this.props.icon.selected || this.onDragOver ? "rgba(255, 255, 255, 0.3)" : this.props.icon.hover ? "rgba(255, 255, 255, 0.2)" : "",

                    backdropFilter: this.props.icon.selected || this.onDragOver ? "blur(5px)" : "",

                    userSelect: "none",

                    outline: this.onDragOver ? "1px solid rgba(24,144,255,0.9)" : "",

                    opacity: (deskStore.dragIng && this.props.icon.selected) ? 0.5 : 1,
                }}

                draggable="true"

                onDragStart={(e) =>
                {
                    deskStore.startX = e.clientX;
                    deskStore.startY = e.clientY;
                    deskStore.dragIng = true;
                }}
                onDrag={(e) =>
                {
                }}

                onDrop={e =>
                {
                    this.onDragOver = false;
                }}
                onDragEnd={e =>
                {
                    deskStore.dragIng = false;
                }}

                onDragOver={e =>
                {
                    if (!this.props.icon.selected && !this.onDragOver)
                        this.onDragOver = true;
                }}

                onDragLeave={e =>
                {
                    if (!this.props.icon.selected && this.onDragOver)
                        this.onDragOver = false;
                }}

                onMouseEnter={() => { this.props.icon.hover = true; }}
                onMouseLeave={() => { this.props.icon.hover = false; }}
                //TODO: 修改这个鼠标按下的操作 以便支持拽拖操作
                onMouseDown={(e) =>
                {
                    e.stopPropagation();

                    if (!this.props.icon.selected)
                        this.OnPick();

                    //参考代码：https://stackoverflow.com/questions/34200023/drag-drop-set-custom-html-as-drag-image

                    // //锁光标
                    // document.body.setPointerCapture(1);
                    // const releasePointerCapture = () =>
                    // {
                    //     document.body.releasePointerCapture(1);
                    //     document.removeEventListener("mouseup", releasePointerCapture);

                    //     if (this.props.icon.selected)
                    //         this.OnPick();
                    // };
                    // document.addEventListener("mouseup", releasePointerCapture);
                }}
                onMouseMove={(e) =>
                {
                }}

                onMouseUp={e =>
                {
                    if (this.props.icon.selected)
                        this.OnPick();
                }}

            >
                <IconSelect />
                <IconMenu />
                <IconImg img={this.props.icon.img} />
                <IconTitle title={this.props.icon.title} />
            </div>
        );
    }
}
